<template>
  <div>
    <div class="fromRow">
      <div style="margin-right: 20px;">{{specName}}:</div>
      <div class="checkGroup">
        <div style="margin-right: 18px;"
             v-for="(item,index) in datalist"
             :key="index">
          <input type="checkbox"
                 @change="handleCheckedChange"
                 :id="item.specpValue"
                 :value="item"
                 v-model="spec">
          <img v-if="checkModule == 'img'"
               @click="choosePic(index)"
               style="width:14px;height:14px;"
               :src="item.specImageUrl">
          <label v-if="!item.isselected"
                 :for="item.specpValue">
            {{item.specpValue}}</label>
          <input v-else
                 style="width:80px;"
                 @input="handleCheckedChange"
                 type="text"
                 v-model="item.specpValue">
        </div>
      </div>
      <sel-file ref="selFile"
                @callback="selFileCallBack"
                albumCode="store"
                dialogTitle="选择图片"
                selectType="radio"
                selMaxWidth="300px"
                selMaxHeight="300px">
      </sel-file>
    </div>
  </div>
</template>
<script>
import selFile from '@/components/file/selFile'
export default {
  props: ['checkdata', 'specName', 'specId', 'specModule'],
  data () {
    return {
      textShow: false,
      spec: [],
      datalist: [],
      bool: false,
      index: 0,
    }
  },
  components: {
    selFile
  },
  computed: {
    checkModule () {
      return this.specModule
    }
  },
  created () {
    this.resetDataList();
  },
  watch: {
    'spec' (val) {
      console.log(val)
      this.resetDataList();
    }
  },
  methods: {
    choosePic (idx) {
      this.index = idx
      // 选择图片
      this.$refs.selFile.open()
    },
    selFileCallBack (data) { //返回选择图片路径
      this.datalist[this.index].specImageUrl = data[0]
    },
    resetDataList () {
      this.datalist = this.checkdata.map((item) => {
        if (this.arrayFn.constansObjByKey(this.spec, item, "id")) {
          //对象被选中
          var obj = this.arrayFn.getObjByKey(this.spec, "id", item.id);
          if (obj) {
            item.isselected = true;
          }
        } else {
          item.isselected = false
        }
        return item
      });
    },
    handleCheckedChange () {
      this.$emit('receptionSpec', { specdata: this.spec, specId: this.specId.toString() })
    }
  }
}
</script>
<style scoped>
.img {
  width: 12px;
  height: 12px;
  border: 1px solid #d8d8d8;
  vertical-align: middle;
}
.ipt {
  width: 40px;
  outline-color: #dcdfe6;
}
.fromRow {
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  width: 100%;
  border: 1px solid red;
  padding: 10px 0;
  align-items: center;
}
.checkGroup {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}
</style>